<template>
  <el-container style="height: 98vh; border: 1px solid #eee;background: #fff">
     <SideBar />
	 <el-container>
		<el-header style="width: 95%;margin-top: 10px;"><HeadBar/></el-header>
		
	    <el-main id="main">

			<el-button @click="stuid2purc" type="primary" round>查询全部流水</el-button>

			<div class="spacer"></div>
			<div>
				<el-date-picker v-model="value1" type="daterange" range-separator="至" 
				start-placeholder="开始日期" end-placeholder="结束日期" class="date-picker">
				</el-date-picker>
				<el-button @click="getPurcByDate" type="primary" round>查询时间段内流水</el-button>
			</div>
			<div class="spacer"></div>
			<div>
				<el-button @click="resetPlaceFilter">取消地点筛选</el-button>
				<el-button @click="resetTypeFilter">取消种类筛选</el-button>
				<el-button @click="clearFilter">取消筛选</el-button>
			</div>
			<div class="spacer"></div>

			<el-table :data="tableData" stripe style="width: 100%" :row-class-name="tableRowClassName"
			:default-sort = "{prop: 'time', order: 'descending'}" ref="filterTable" border height="77%">
				<el-table-column fixed prop="place" label="地点"
				column-key="place"
				:filters="placeFilters"
				:filter-method="filterPlace">  </el-table-column>
				<el-table-column prop="time" label="时间" sortable> </el-table-column>
				<el-table-column prop="type" label="种类"
				column-key="type"
				:filters="typeFilters"
				:filter-method="filterType">  </el-table-column>
				<el-table-column prop="amount" label="金额" sortable>  </el-table-column>
			</el-table>

	    </el-main>
	 </el-container>
  </el-container>
</template>

<script>
import SideBar from '@/components/SideBar.vue'
import HeadBar from '@/components/HeadBar.vue'
import request from "@/utils/request"

export default {
	components:{SideBar,HeadBar},
	data(){
		return{
			value1:null,
			tableData: [],
			studentId: '',
      		timeFilters: [], // 动态生成的 name 筛选选项
      		typeFilters: [], // 动态生成的 age 筛选选项
			startDate:'',
			endDate:''
		}
	},
	created() {
		this.getStudentId()
  	},
    methods: {
		// 表格斑马纹
		tableRowClassName({rowIndex}) {
        	if (rowIndex % 4 === 0) {
          		return 'success-row';
        	} else if ((rowIndex - 2) % 4 === 0) {
          		return 'warning-row';
        	}
        	return '';
      	},
		getStudentId(){
			const userInfo = JSON.parse(sessionStorage.getItem("user"))
			console.log(userInfo)
			this.studentId = userInfo?.data?.studentId || '未知用户'
		},
		// 获取时间段内流水
		getPurcByDate(){
			if (!this.value1 || this.value1.length === 0) {
				this.$message({
					type: "warning",
					message: "请选择日期范围"
				});
				return;
			}
			this.startDate = this.value1[0].toISOString().split('T')[0]
			this.endDate = this.value1[1].toISOString().split('T')[0]
			console.log(this.startDate)
			var url = "/card/getPurcByDate?studentId="+this.studentId+"&startDate="
				+this.startDate+"&endDate="+this.endDate
			request.get(url).then(res => {
				if (res.data.state == '0') {
					this.$message({
						type: "success",
						message: "查询成功"
					})
					this.tableData = Array.isArray(res.data.data) ? res.data.data : [];
					// 动态生成筛选选项
        			this.generateFilters();
					console.log('数据类型:', Array.isArray(res.data.data));
                } else {
					this.$message({
						type: "error",
						message: "查询失败"
					})
				}
            })

		},
		// 获取全部流水
        stuid2purc() {
			var url = "/card/stuid2purc?studentId="+this.studentId
            request.get(url).then(res => {
				if (res.data.state == '0') {
					this.$message({
						type: "success",
						message: "查询成功"
					})
					this.tableData = Array.isArray(res.data.data) ? res.data.data : [];
					// 动态生成筛选选项
        			this.generateFilters();
					console.log('数据类型:', Array.isArray(res.data.data));
                } else {
					this.$message({
						type: "error",
						message: "查询失败"
					})
				}
            })
        },
		// 动态生成筛选选项
    	generateFilters() {
      		// 生成 place 筛选选项
      		this.placeFilters = this.tableData
        		.map(item => item.place)
        		.filter((value, index, self) => self.indexOf(value) === index)
        		.map(place => ({ text: place, value: place }));

      		// 生成 type 筛选选项
      		this.typeFilters = this.tableData
        		.map(item => item.type)
        		.filter((value, index, self) => self.indexOf(value) === index)
        		.map(type => ({ text: type, value: type }));
    	},
		resetPlaceFilter() {
        	this.$refs.filterTable.clearFilter('place');
	  	},
		resetTypeFilter() {
        	this.$refs.filterTable.clearFilter('type');
	  	},
      	clearFilter() {
        	this.$refs.filterTable.clearFilter();
      	},
		filterPlace(value, row) {
        	return row.place === value;
      	},
      	filterType(value, row) {
        	return row.type === value;
      	}

    }

}
</script>

<style>
  .el-table .success-row {
    background: #ebf5f9;
  }

  .el-table .warning-row {
    background: #f9f6eb;
  }

  #main {
		width: 95%;
		margin-top: 30px;
		align-items: center; 
		box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
		margin-left: 50px
	}

	.spacer {
		height: 20px; 
	}
	.date-picker {
		margin-right: 10px; 
	}

</style>